<template>
    <!-- <van-nav-bar
            title="我的收款账户"
            right-text="添加提现账户"
            @click-right="onClickRight"
    >
    </van-nav-bar> -->
  <div class="myAccount">
    <van-popup v-model:show="data.showQrcodeModel">
      <van-image
        width="100%"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </van-popup>
    <div
      class="card"
      v-for="item in data.list"
      :key="item.id"
    >
      <div class="card-item__header flex-align-center justify-between">
        <span class="title">{{ item.name }}</span>
        <van-button
          type="primary"
          class="apply-btn"
          @click="applyWithdrawHandler(item)"
        >提现申请</van-button>
      </div>
      <!-- <div class="card-item__cell">姓名：<span class="text-333">{{ item.name }}</span></div> -->
      <div class="card-item__cell">支付方式：<span class="text-333">{{ filterPayType(item.payType) }}</span></div>
      <div
        class="card-item__cell"
        v-if="item.payType=='3'"
      >银行卡号：<span class="text-333">{{ item.bankNo }}</span> </div>
      <div
        class="card-item__cell"
        v-if="item.payType=='3'"
      >开户行：<span class="text-333">{{ item.bankName }}</span> </div>
      <div
        class="card-item__cell"
        v-if="item.payType!='3'"
      >收款码：
        <van-image
          width="2.16rem"
          height="2.16rem"
          fit="cover"
          :src="item.payUrl"
          @click="previewHandler(item)"
        />
      </div>
    </div>
    <div class="notdata" v-if="data.list && !data.list.length">
        <img src="../assets/notOrderList21.png" width="100%" />
        <div class="not-text">没有账户～</div>
    </div>
    <van-image-preview v-model:show="data.showImagePreview" :images="data.images" />
  </div>

   <div class="footer media">
    <div class="footer-btn text-center text-32" @click="confirmHandler">创建收款账户</div>
    <!-- <p class="footer-btn__line text-center text-32" @click="goUrl('/recharge-list')">充值申请记录</p> -->
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue"
import { useRouter } from 'vue-router'
import { MyAccount } from "@/config/api"
import { payTypes } from "@/utils/index"
import { ImagePreview } from "vant"
import { createApp } from 'vue';

const router = useRouter();
const app = createApp();
app.use(ImagePreview);

const data = ref({
  payTypes: payTypes,
  showQrcodeModel: false,
  showImagePreview: false,
  images: []
})
//  const VanImagePreview = ImagePreview.Component;

const confirmHandler = () => {
    router.push("/addAccount")
}

onBeforeMount(() => {
  loadData()
})

const previewHandler = (item)=>{
    data.value.images = [item.payUrl]
    data.value.showImagePreview = true
}
const applyWithdrawHandler = ({ id, payType }) => {
    router.push({path: '/withdrawal', query: {id, payType}})
}
const loadData = () => {
  MyAccount().then(resp => {
    data.value.list = resp
  })
}

const filterPayType = (val) => {
  return [ '银行卡'][+val]
}

</script>

<style lang="less" scoped>
.myAccount {
  min-height: 100vh;
  background: #f0f3f8;
  padding: 0.4rem;
  .card {
    margin: 0 0 0.4rem;
    padding: 0 0.4rem 0.4rem;
    background: #ffffff;
    border-radius: 0.16rem;
    .card-item__header {
      line-height: 1.52rem;
      border-bottom: 0.01rem solid #eeeff3;
      .amount,
      .title {
        font-size: 0.48rem;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #101d37;
      }
    }
    .card-item__cell {
      font-size: 0.4rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 0.56rem;
      display: flex;
      justify-content: space-between;
      margin-top: 0.4rem;
      &:first-of-type {
        margin-top: 0;
      }
    }
  }
  .apply-btn {
    padding: 0 0.24rem;
    height: 0.67rem;
    border-radius: 0.33rem;
  }
}
.footer {
  width: 100%;
//   height: 3.68rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  .footer-btn {
    width: 8.4rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: var(--color-primary);
    border-radius: 0.27rem;
    margin: 0.67rem auto 0.53rem;
    color: white;
  }
  .footer-btn__line {
    color: var(--color-primary);
  }
}
</style>
